<template>
  <div class="wrapper">
    <div class="plot">
      <div class="search">
        <div class="search-wrapper">
          <input type="text" placeholder="请输入小区的名称" v-model="keyword" @keyup.enter="search" @input="search">
          <span class="search-icon" @click="search"></span>
        </div>
      </div>
      <ul>
        <li v-for="(item,index) in lists" :key="index" tag="div" class="line" @click="goBack(item)">
          {{item.title}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

<style lang='scss'>
  .wrapper {

    .plot {
      background: #fff;
      .search {
        text-align: center;
        height: 44px;
        line-height: 44px;
        .search-wrapper {
          position: relative;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          width: 92%;
          margin: 0 10px;
          border-radius: 4px;
          background-color: #e6e6e6;
          input {
            width: 118px;
            font-size: 14px;
            outline: none;
            border: none;
            background-color: #e6e6e6;
            &::-ms-input-placeholder {
              text-align: center;
            }
            &::-webkit-input-placeholder {
              text-align: center;
            }
          }
          .search-icon {
            position: absolute;
            top: 6px;
            /*right: 10px;*/
            display: inline-block;
            width: 17px;
            height: 17px;
            background-size: 17px 17px;
            background-repeat: no-repeat;
            @include bgimg('../home/images/search');
          }

        }
      }
      .now-plot {
        padding-left: 10px;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        background-color: #D9D9D9;
      }
      ul {
        padding: 0 10px;
        .line {
          height: 44px;
          line-height: 44px;
          border-bottom: 1px solid rgb(217, 217, 217);
          font-size: 15px;
          &:last-child {
            border-bottom: 1px solid transparent;
          }
        }
      }
    }
  }
</style>
